@import '../../mixins'

.WindowSelectInput
  box(absolute, flex)
  pos(0, 0)
  size(100%, same)
  flex-direction: column

.WindowSelectInput .title
  box(relative)
  text(s: rem(16))
  font-weight: 700
  color: var(--title-fg)
  padding: 12px 8px 8px
  text-align: center
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

// ---
// -- Window container
// -
.WindowSelectInput .box
  box(relative)
  padding: 8px 8px 0
  opacity: 0
  transform: translateY(16px)
  transition: opacity var(--d-fast), transform var(--d-fast)
  &:last-of-type
    padding-bottom: 64px

.WindowSelectInput[data-ready]
  .box
    opacity: 1
    transform: translateY(0)
  .box:nth-child(1)
    transition: opacity var(--d-fast), transform var(--d-fast)
  .box:nth-child(2)
    transition: opacity var(--d-fast) .1s, transform var(--d-fast) .1s
  .box:nth-child(3)
    transition: opacity var(--d-fast) .2s, transform var(--d-fast) .2s
  .box:nth-child(4)
    transition: opacity var(--d-fast) .3s, transform var(--d-fast) .3s
  .box:nth-child(5)
    transition: opacity var(--d-fast) .4s, transform var(--d-fast) .4s

// ---
// -- Window
// -
.WindowSelectInput .win
  box(relative)
  size(100%, max-h: 240px)
  border-radius: 3px
  overflow: hidden
  box-shadow: 0 0 0 1px #00000032, 0 2px 8px 0 #00000032
  cursor: pointer
  opacity: .8
  transition: opacity var(--d-fast)
  &:hover
    opacity: 1
  &:active
    transition: none
    opacity: .8
.WindowSelectInput .box[data-selected] .win
  box-shadow: 0 0 0 1px var(--active-fg), 0 2px 8px 0 #00000032
  opacity: 1

// ---
// -- Window title
// -
.WindowSelectInput .window-title
  box(relative)
  text(s: rem(14))
  color: var(--title-fg)
  padding: 2px 8px
  margin: 0 0 1px
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  background-color: #78787832
  box-shadow: 0 1px 0 0 #00000032
.WindowSelectInput .box[data-no-screenshot] .window-title
  text(s: rem(15))
  padding: 6px 8px
  margin: 0
  box-shadow: none

// ---
// -- Window screenshot
// -
.WindowSelectInput .win > img
  box(relative, block)
  size(max-w: 100%)
  margin: 0
  padding: 0
